<template>
    <div class="center-box" ref="box">
        <div class="body" :class="{ 'body-row': isRow, 'body-column': !isRow }">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isRow: true
        };
    },

    mounted() {
        const box = this.$refs.box;
        const el = box.children[0].children[0];

        el.addEventListener("load", e => {
            const width = el.offsetWidth;
            const height = el.offsetHeight;

            let isRow = width / height >= 1 ? true : false;
            this.isRow = isRow;
        });
    },

    methods: {}
};
</script>


<style lang="less" scoped>
.center-box {
    width: 100%;
    height: 100%;

    .body {
        position: relative;
        width: 100%;
        height: 100%;

        img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    }

    .body-row {
        img {
            height: 100%;
            width: auto;
        }
    }

    .body-column {
        img {
            width: 100%;
            height: auto;
        }
    }
}
</style>